<template>
  <view class="login - container">
    <view class="logo">
      <text>小超市小程序</text>
    </view>
    <view class="input - area">
      <input v - model="phone" type="number" placeholder="请输入手机号" />
      <input v - model="code" type="number" placeholder="请输入验证码" />
      <button :class="{'disabled':!isPhoneValid}" @click="getCode" :disabled="!isPhoneValid">{{codeText}}</button>
    </view>
    <button @click="login" class="login - btn">登录</button>
    <view class="other - login - ways">
      <button @click="wechatLogin" class="wechat - btn">
        <text>微信登录</text>
      </button>
    </view>
    <view class="footer">
      <text @click="forgetPassword">忘记密码？</text>
      <text @click="register">注册新账号</text>
    </view>
  </view>
</template>

<script>
import store from '@/store';
export default {
  data() {
    return {
      phone: '',
      code: '',
      codeText: '获取验证码',
      countdown: 0,
      isPhoneValid: false
    };
  },
  methods: {
    checkPhone() {
      // 简单的手机号格式校验
      const reg = /^1[3 - 9]\d{9}$/;
      this.isPhoneValid = reg.test(this.phone);
    },
    getCode() {
      if (this.isPhoneValid) {
        // 这里可以添加发送验证码的逻辑，比如调用接口
        this.countdown = 60;
        const interval = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(interval);
            this.codeText = '获取验证码';
          } else {
            this.codeText = this.countdown +'s后重新获取';
          }
        }, 1000);
      }
    },
    login() {
      // 这里添加登录逻辑，例如调用接口发送手机号和验证码进行登录
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      if (!this.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
        return;
      }
      // 实际开发中，这里发送登录请求
      console.log('执行登录操作，手机号：', this.phone, '验证码：', this.code);
	  
	  // uni.request({
	  //     url: 'https://example.com/login',
	  //     method: 'POST',
	  //     data: {
	  //         username: 'user1',
	  //         password: 'password1'
	  //     },
	  //     success: (res) => {
	  //         if (res.data.success) {
	  //             store.commit('login');
	  //         }
	  //     }
	  // });
	  
    },
    wechatLogin() {
      // 这里添加微信登录逻辑，例如调用uni.login等相关API
      console.log('微信登录');
    },
    forgetPassword() {
      // 跳转到忘记密码页面，这里只是一个示例，实际需要实现页面跳转逻辑
      console.log('跳转到忘记密码页面');
    },
    register() {
      // 跳转到注册页面，这里只是一个示例，实际需要实现页面跳转逻辑
      console.log('跳转到注册页面');
    }
  },
  watch: {
    phone() {
      this.checkPhone();
    }
  }
};
</script>